<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">课程信息</block>
		</cu-custom>
		
		<message ref="message"></message>
		
		<!-- 已购课程信息 -->
		<view class="text-black margin-lr margin-top radius">
			<view class="text-bold text-xl text-center">{{course.name}}</view>
		</view>
		
		<view v-if="course.classTime.length>0" class="padding-sm">
			<class-time-item :classTime="item" v-for="(item, index) in timeList" :key="index"></class-time-item>
		</view>
		<view v-else class="margin bg-white radius padding flex justify-center align-center text-black text-xl">
			<view class="cuIcon cuIcon-emoji margin-right-sm"></view>
			暂未安排上课时间
		</view>
	</view>
</template>

<script>
	import ClassTimeItem from "@/components/class-time-item/class-time-item.vue"
	import { getCourseById } from "@/api/course.js"
	import { getClassTimeList } from "@/api/course-time.js"
	import { mapGetters } from "vuex"
	
	export default {
		components: {
			ClassTimeItem
		},
		data() {
			return {
				courseId: undefined,
				course: {},
				timeList: []
			}
		},
		created() {
			this.courseId = this.$store.getters.courseId
			this.getCourseInfoById()
			this.getClassTimeList()
		},
		computed:{
			...mapGetters(['classTimeRefresh'])
		},
		watch:{
			classTimeRefresh() {
				this.getClassTimeList()
			}
		},
		methods: {
			// 根据id获取课程信息
			getCourseInfoById() {
				getCourseById(this.courseId).then(res => {
					this.course = res.data
				})
			},
			getClassTimeList() {
				getClassTimeList(this.courseId).then(res => {
					this.timeList = res.data
					this.$store.commit("course/set_classTimeRefresh", false)
				})
			}
		}
	}
</script>

<style>

</style>
